

import React from 'react'
import styles from "@/app/wechat/page.module.css"
import Image from 'next/image'
import PrimariyMessage from './components/PrimariyMessage'

const page = () => {
    const user = [];
    for (let i = 1; i < 15; i++) {
        user.push(`李东${i}`);
    }

    return (
        <div className={styles.chatContainer}>
            <div className={styles.chatSidebar}>
                <Image className={styles.pic} width={40} height={40} src={''} alt='' />
            </div>
            <div className={styles.chatListContainer}>
                <div className={styles.listHeader}>
                    <div className={styles.searchInputCT}>
                        <span className={styles.searchEmoji}>🔍</span>
                        <input className={styles.searchInput} type="text" placeholder='搜索' />
                    </div>
                    <button className={styles.addButton}>+ </button>
                </div>
                <div className={styles.chatListItems}>
                    <div className={styles.chatList}>
                        <Image className={styles.pic} width={40} height={40} src={""} alt='' />
                        <div className={styles.primariyMessage}>
                            <p className={styles.listUserName}>李东</p>
                            <p className={styles.listMessage}>这里是缩略信息...</p>
                        </div>

                    </div>
                    {
                        user.map((userName, index) => {
                            return <PrimariyMessage key={index} userName={userName} />
                        })
                    }
                </div>
            </div>
            <div className={styles.chatBox}>
                <div className={styles.chatBoxHeader}>
                    <h1>李东</h1>
                </div>
                <div className={styles.chatBoxBody}>
                    <div className={styles.receiveChatBoxList}>
                        <Image className={styles.receivechatBoximg} src={""} alt='' />
                        <p className={styles.receiveMessage}>你好我是李东,我是李东,我是李东,我是李东,我是李东,我是李东,我是李东</p>
                    </div>
                    <div className={styles.postChatBoxList}>
                        <Image className={styles.postchatBoximg} src={""} alt='' />

                        <p className={styles.postMessage}>你不是李东你不是李东你不是李东你不是李东你不是李东你不是李东</p>

                    </div>
                </div>
                <div className={styles.chatBoxInput}>
                    <div className={styles.chatInputToolsBar}>
                        表情
                    </div>
                    <form className={styles.chatInputForm} action="">

                        <textarea className={styles.chatInputText} name="" id="" placeholder='请输入...'></textarea>
                        <button className={styles.chatInputButton}>发送</button>
                    </form>

                </div>

            </div>
        </div>
    )
}

export default page
